---
title: "Pagination"
description: A structured navigation system that divides content into multiple pages, improving load performance and user experience.
order: 3
published: true
status: beta
references: ["https://react-spectrum.adobe.com/react-aria/ListBox.html#props"]
---


## Basic
Pagination is a navigation component that allows users to move through multiple pages. It’s composed of several elements working together to provide a smooth user experience.
<How isCenter={false} toUse="navigation/pagination/pagination-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/pagination
```

## Composed components
<Composed components={['button']}/>

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```

<SourceCode toShow='pagination'/>

## Anatomy
```
import {
  Pagination,
  PaginationItem,
  PaginationList,
  PaginationSection,
} from "@/components/ui/pagination"
```

```
<Pagination>
  <PaginationList>
    <PaginationItem segment="first" href="#" />
    <PaginationItem segment="previous" href="#" />
    <PaginationSection
      aria-label="Pagination Segment"
      className="rounded-lg border lg:hidden"
    >
      <PaginationItem segment="label">1</PaginationItem>
      <PaginationItem segment="separator" />
      <PaginationItem className="text-muted-fg" segment="label">
        10
      </PaginationItem>
    </PaginationSection>
    <PaginationSection
      aria-label="Pagination Segment"
      className="hidden lg:flex"
    >
      <PaginationItem href="#">1</PaginationItem>
    </PaginationSection>
    <PaginationItem segment="next" href="#" />
    <PaginationItem segment="last" href="#" />
  </PaginationList>
</Pagination>
```

## Simple
The simple pagination setup doesn’t display page numbers, using only basic arrow navigation.
<How isCenter={false} toUse="navigation/pagination/simple-pagination-demo" />
